// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs: ['我的借阅', '历史借阅'],
    tabsCount: 0, // tabs个数
    stv: {
      windowWidth: 0, // 设备宽度
      lineWidth: 0, // 线条宽度
      offset: 0, // 线条和slider滑动的距离
      tStart: false // 滑动控制器 滑动开始控制的样式
    },
    activeTab: 0, // 当前触发的tab
  },
  /** 
   * 绑定事件
  */
  // 更新索引
  updateSelectedPage(page) {
    let { stv, activeTab } = this.data;
    activeTab = page; // 更改当前指向
    stv.offset = stv.windowWidth * activeTab;
    this.setData({
      stv, activeTab
    })
    // 做优化的话应该是在这里缓存数据
  },
  // tab点击事件
  handlerTabTap(e) {
    let index = e.currentTarget.dataset.index
    this.updateSelectedPage(index);
    console.log(e, '点击事件获取')
  },
  // 窗口滑动事件
  handlerStart(e) {
    let {
      clientX,
      clientY
    } = e.touches[0];
    this.startX = clientX; // 起始距离 用于与结尾距离计算得出结果
    this.tapStartX = clientX; // 记录滑动开始的距离 用于后续频繁使用
    this.tapStartY = clientY; 
    this.tapStartTime = e.timeStamp; // 起始时间戳
    this.data.stv.tStart = true;
    this.setData({
      stv: this.data.stv
    })
    console.log(e.touches, '触摸事件', e.timeStamp)
  },
  handlerMove(e){
    let {
      clientX,
      clientY
    } = e.touches[0];
    let {
      stv
    } = this.data
    let offsetX = this.startX - clientX; // 滑动距离 根据正负确认左滑还是右滑动
    this.startX = clientX // 移动刷新clientX
    stv.offset += offsetX // 移动更新offsetX 根据offerset更新线条

    if (stv.offset <= 0) {
      stv.offset = 0;
    } else if (stv.offset >= stv.windowWidth * (this.tabsCount - 1)) {
      // 这个边界问题 如果 减1是正确的 0才是第一张 最后一张是 n-1*偏移量
      // 因为选择绝对定位的方式滑动 要减少去线条自身的宽度
      stv.offset = stv.windowWidth * (this.tabsCount - 1); 
    }
    // 更新视图
    this.setData({
      stv: stv
    });
    console.log('是否是因为频繁setData的原因导致太慢')
  },
  handlerCancel(e) {
    console.log(e, '触摸结束')
  },
  handlerEnd(e) {
    let {
      clientX,
      clientY
    } = e.changedTouches[0];
    let endTime = e.timeStamp;
    let {
      tabs,
      stv,
      activeTab
    } = this.data;
    let {
      offset,
      windowWidth
    } = stv;
    let intervalTime = endTime - this.tapStartTime // 间隔时间
    // 快速滑动
    
    // if(intervalTime <=300){
    //   // 向左滑动?
      
    //   if(Math.abs(this.tapStartY - clientY) < 50 ){
    //     // X轴平移距离5为界限 300ms内滑动的距离过大 直接页面加一 主要是这个判定距离的问题 如果只有两个就不需要
    //     if(this.tapStartX - clientX > 5){
    //       if(activeTab < this.tabsCount -1) {
    //         this.setData({activeTab: ++activeTab})
    //       }
    //     } else {
    //       if(activeTab > 0) {
    //         this.setData({activeTab: --activeTab})
    //       }
    //     }
    //     stv.offset = stv.windowWidth*activeTab;
    //   } else {
    //     // 快速滑动 Y距离大于50 判断Y？ 左右滑动？
    //     let page = Math.round(offset/windowWidth)
    //     if (activeTab != page) {
    //       this.setData({activeTab: page})
    //     }
    //     stv.offset = stv.windowWidth*page;
    //   }
     
    // } else {
    //   // 慢速移动
    //   let page = Math.round(offset/windowWidth); // 滑动的页面次数 向更大的整数取整 四舍五入
    //   // 修改当前activeTab
    //   if(activeTab != page){
    //     this.setData({activeTab: page})
    //   }
    //   // 偏移
    //   stv.offset = stv.windowWidth*page
    // }
    
    // 
    let page = Math.round(offset / windowWidth); // 滑动的页面次数 向更大的整数取整 四舍五入
    // 修改当前activeTab控制样式
    if (activeTab != page) {
      this.setData({
        activeTab: page
      })
      // 触发事件
    }
    // 偏移
    stv.offset = stv.windowWidth * page
    stv.tStart = false;
    this.setData({
      stv: this.data.stv
    })
  },

  // 滑动到底事件
  borrowBoottom(e){
   console.log(e)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    try {
      let {
        tabs
      } = this.data
      let len = tabs.length
      let res = wx.getSystemInfoSync()

      this.data.stv.lineWidth = res.windowWidth / len
      this.data.stv.windowWidth = res.windowWidth
      this.data.tabsCount = len
      this.tabsCount = len
      this.setData({
        stv: this.data.stv
      })
      console.log(this.data, '逻辑层不更新数据的话')
      console.log(res, '获取设备信息', len, tabs)
    } catch (e) {

    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})